<template>
    <div>
        <div class="place" v-for="(v,i) in recommendlist" :key="i">
            <div class="photo">
                <img :src="v.imgUrl">
            </div>
            <div class="play">
                <h3>{{v.title}}</h3>
                <h6>{{v.desc}}</h6>
                <router-link to="/gogo/+i">
                <p @click="clickHandler(v.id)">查看详情</p>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'listcom',
        props: ['recommendlist'],
        data() {
            return {
            }
        },
        methods:{
            clickHandler(i){
                console.log(this)
            }
        }
    }
</script>

<style scoped>
    .place {
        display: flex;
        border-bottom: 1px solid #eee;
    }
    .place .photo {
        padding: 10px 20px 10px 10px;
        width: 172px;
        height: 172px;
    }
    .place .photo img {
        width: 100%;
    }
    .play {
        flex: 3;
        padding:10px 10px 10px 0;
        line-height: 50px;
    }
    .play h3 {
        font-size: 30px;
        padding-top: 10px;
    }
    .play h6 {
        font-size: 28px;
        color: #cacaca;
    }
    .play p {
        margin-top: 10px;
        width: 152px;
        height: 46px;
        border-radius: 8px;
        background: #ff9300;
        text-align: center;
        line-height: 46px;
        color: #fff;
    }
</style>
